Ext.Ajax.extraParams = {format:'json'};
Ext.onReady(function() {
	var pageBody = Ext.getBody().getViewSize();
	Ext.QuickTips.init();

	//we want to setup a model and store instead of using dataUrl
	Ext.define('Open', {
		extend: 'Ext.data.Model',
		fields: [
			{name: 'open_id', type: 'int'},
			{name: 'doctor_id', type: 'int'},
			{name: 'day',  type: 'string'},
			{name: 'begin_time',  type: 'string', convert: this.timeConvert},
			{name: 'end_time', type: 'string', convert: this.timeConvert},
			{name: 'cabinet', type: 'int'}
		]
	});

	var store = Ext.create('Ext.data.Store', {
		model: 'Open',
		proxy: {
			type: 'ajax',
			url : '/index/openinghours',
			reader: {
				type: 'json',
				root: 'data',
				idProperty: 'open_id',
				totalProperty: 'total'
			}
		},
		pageSize: 20,
		remoteSort: false,
		autoLoad: true
	});

	//Ext.ux.tree.TreeGrid is no longer a Ux. You can simply use a tree.TreePanel
	Ext.create('Ext.form.Panel',{
		id: 'open',
		title: 'Doctors Open Hours',
		animCollapse:false,
		renderTo: Ext.getBody(),
		width: pageBody.width,
		height: pageBody.height,
		layout: 'fit',
		items: [
			{
				xtype: 'grid',
				border: false,
				store: store,
				dockedItems: [{
					xtype: 'toolbar',
					dock: 'top',
					id: 'grid-top-buttons',
					items: [

					]
				}],
				columns:[
					{
						text: 'Doctor',
						dataIndex: 'doctor_id'
					},
					{
						text: 'Day',
						dataIndex: 'day'
					},
					{
						text: 'Start time',
						dataIndex: 'begin_time'
					},
					{
						text: 'End time',
						dataIndex: 'end_time'
					},
					{
						text: 'Cabinet No',
						dataIndex: 'cabinet'
					}
				],
				forceFit:true,
				bbar: new Ext.PagingToolbar({
					pageSize: 20,
					store: store,
					displayInfo: true
				}),
				loadMask: true,
				listeners: {
					render: function(g) {
						this.grid = g;
					},
					scope: this
				}
			}
		]
	});
});